<template>
  <div id="app">
    <!-- 只有在用户已登录时才显示导航栏 -->
    <nav class="navbar" v-if="isLoggedIn">
      <div class="nav-brand">校园智能助手系统</div>
      <ul class="nav-menu">
        <li><router-link to="/">首页</router-link></li>
        <li><router-link to="/courses">课程学习</router-link></li>
        <li><router-link to="/ai/chat">AI问答</router-link></li>
        <li><router-link to="/campus-card">校园卡</router-link></li>
        <li><router-link to="/dorm-repair">宿舍报修</router-link></li>
        <li><router-link to="/library">图书馆</router-link></li>
        <li><router-link to="/notices">校园通知</router-link></li>
        <li><router-link to="/canteen">食堂服务</router-link></li>
        <li><router-link to="/activities">校园活动</router-link></li>
        
        <!-- 学生特有的功能 -->
        <li v-if="userRole === 'student'"><router-link to="/leave-apply">请假申请</router-link></li>
        <li v-if="userRole === 'student'"><router-link to="/scholarship">奖学金申报</router-link></li>
        
        <!-- 教师特有的功能 -->
        <li v-if="userRole === 'teacher'"><router-link to="/leave-apply">请假审批</router-link></li>
        <li v-if="userRole === 'teacher'"><router-link to="/scholarship">奖学金审批</router-link></li>
        
        <!-- 校长特有的功能 -->
        <li v-if="userRole === 'principal'"><router-link to="/leave-apply">教师请假审批</router-link></li>
        <li v-if="userRole === 'principal'"><router-link to="/scholarship">奖学金终审</router-link></li>
        
        <li><router-link to="/user/info">个人中心</router-link></li>
        <li><a @click="logout">退出</a></li>
      </ul>
    </nav>
    <main class="main-content">
      <router-view></router-view>
    </main>
    <!-- 只有在用户已登录时才显示页脚 -->
    <footer class="footer" v-if="isLoggedIn">
      <p>&copy; 2025 校园智能助手系统. All rights reserved.</p>
    </footer>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      isLoggedIn: false,
      userRole: ''
    }
  },
  methods: {
    logout() {
      // 清除登录状态
      localStorage.removeItem('token')
      localStorage.removeItem('user')
      this.isLoggedIn = false
      this.userRole = ''
      // 跳转到登录页
      this.$router.push('/login')
    }
  },
  mounted() {
    // 检查是否有登录token
    const token = localStorage.getItem('token')
    const userStr = localStorage.getItem('user')
    if (token && userStr) {
      this.isLoggedIn = true
      try {
        const user = JSON.parse(userStr)
        this.userRole = user.role
      } catch (e) {
        console.error('解析用户信息失败:', e)
      }
    }
  },
  watch: {
    // 监听路由变化，更新登录状态
    $route() {
      const token = localStorage.getItem('token')
      const userStr = localStorage.getItem('user')
      if (token && userStr) {
        this.isLoggedIn = true
        try {
          const user = JSON.parse(userStr)
          this.userRole = user.role
        } catch (e) {
          console.error('解析用户信息失败:', e)
        }
      } else {
        this.isLoggedIn = false
        this.userRole = ''
      }
    }
  }
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Arial', sans-serif;
  background-color: #f5f5f5;
}

.navbar {
  background-color: #2c3e50;
  color: white;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-brand {
  font-size: 1.5rem;
  font-weight: bold;
}

.nav-menu {
  display: flex;
  list-style: none;
  flex-wrap: wrap;
}

.nav-menu li {
  margin-left: 1rem;
}

.nav-menu a {
  color: white;
  text-decoration: none;
  cursor: pointer;
}

.nav-menu a:hover {
  text-decoration: underline;
}

.main-content {
  min-height: calc(100vh - 120px);
  padding: 2rem;
}

.footer {
  background-color: #34495e;
  color: white;
  text-align: center;
  padding: 1rem;
}

@media (max-width: 768px) {
  .nav-menu {
    flex-direction: column;
  }
  
  .nav-menu li {
    margin: 0.5rem 0;
  }
}
</style>